<template>
	<view class="container">
			<!-- 包含了组织名称  邮箱  和地址的模态框 -->
			<u-modal :show="isShowModal" :title="modalTitle" :closeOnClickOverlay="true" :showCancelButton="true"
				@confirm="confirmModal()" @cancel="closeModal()" @close="closeModal()">
				<view class="slot-content">
					<u-form ref="modalForm" :rules="modalRules" :model="modalFormData" labelWidth="1">
						<u-form-item v-if="modalTitle=='修改组织名称'" class="" prop="name" key="name"
							class="margin-bottom-32">
							<view class="textarea-box">
								<u--textarea v-model="modalFormData.name" placeholder="请输入昵称" count
								border="none"	autoHeight maxlength="20" style="width: 100%;text-align: center;"></u--textarea>
								<!-- <input type="text"> -->
								
							</view>
							
						</u-form-item>
						<u-form-item v-if="modalTitle=='修改邮箱'" class="" prop="email" key="email"
							class="margin-bottom-32">
<!-- 							<u--input class="name-input" v-model="modalFormData.email" placeholder="请输入邮箱">
							</u--input> -->
							<input type="text" v-model="modalFormData.email" placeholder="请输入邮箱" class="input_border input-width" />
						</u-form-item>
						<u-form-item v-if="modalTitle=='修改地址'" class="" prop="address" key="address"
							class="margin-bottom-32">
							<u--input class="name-input" v-model="modalFormData.address" placeholder="请输入邮箱">
							</u--input>
						</u-form-item>
					</u-form>
				</view>
			</u-modal>
	</view>
</template>

<script>
	export default {
		props: {
			isShowModal: {
				type: Boolean,
				default: false
			},
			modalTitle: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				modalFormData: {
					name: '',
					email: '',
					address: ''
				},
				modalRules: {
					name: [{
						required: true,
						message: '请输入昵称',
						trigger: 'blur'
					}, ],
					email: [{
							required: true,
							message: '请输入邮箱',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.email(value);
							},
							message: '请输入正确的邮箱格式',
							trigger: ['blur'],
						}
					]
				
				},
			}
		},
		created() {
			console.log('created')
		},
		methods: {
			closeModal() {
				// this.modalTitle = ''
				this.$emit('closeModal')
			},
			
			confirmModal() {
				console.log('confirmModal222')
				// this.isShowNamePop = false
				this.$refs.modalForm.validate().then((valid) => {
					console.log(111);
					if (valid) {
						console.log(123)
						let data;
						if(this.modalTitle == '修改组织名称') {
							data = this.modalFormData.name
						}else if(this.modalTitle == '修改邮箱') {
							data = this.modalFormData.email
						}else if(this.modalTitle == '修改地址') {
							data = this.modalFormData.address
						}
						
						let params = {
							modalTitle: this.modalTitle,
							data: data
						}
						this.$emit('confirmModal', params)
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		.textarea-box {
			min-width: 500rpx !important;
			border-radius: 12rpx;
			border: 2rpx solid #dadbde;
			height: 78rpx;
		}
		.u-textarea{
			box-sizing: border-box;
		}
		.input-width{
				min-width: 500rpx !important;
						border-radius: 12rpx;
						height: 78rpx;
						border: 2rpx solid #dadbde;
						padding: 0 15rpx;
		}
		
	}
</style>
